<!-- 面包屑 -->

<template>
    <div v-show="breadcrumbPath.length > 1" class="breadcrumb-div container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="item in breadcrumbPath"
              :key="item.name"
              :to="{name: item.name}"
            >
                {{ item.meta.title }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
import { computed } from "vue";
import { useStore } from 'vuex'

export default {
    setup() {
        const store = useStore()
        return {
            // 在 computed 函数中访问 vuex中存储的面包屑路径bcPath
            breadcrumbPath: computed(() => store.state.bcPath)
        }
    }
}
</script>

<style scoped>
    .breadcrumb-div {
        margin-bottom: 20px;
    }
</style>
